<template>
  <div class="main-box">
    <div class="box-top">
      <div>
        <h3>总用户人数：</h3>
        <h2>{{ displayData.userTotal }}</h2>
      </div>
      <div>
        <h3>管理员：</h3>
        <h2>{{ displayData.adminTotal }}</h2>
      </div>
      <div>
        <h3>最近新增用户：</h3>
        <h2>{{ displayData.recent }}</h2>
      </div>
      <div>
        <h3>文章总计：</h3>
        <h2>{{ displayData.articleTotal }}</h2>
      </div>
    </div>
    <div class="box-chart">
      <div ref="char1Ref"></div>
      <div>
        <div ref="char2Ref"></div>
        <div ref="char3Ref"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
import * as echarts from "echarts";
import { useThemeStore } from "../../store/theme";
import {
  getDisplayDataApi,
  analysisAddApi,
  getDarkThemeApi,
} from "../../api/free";
import { ElMessage } from "element-plus";

const theme = useThemeStore();
let myChart1;
let myChart2;
let myChart3;
const char1Ref = ref(null);
const char2Ref = ref(null);
const char3Ref = ref(null);

//setup执行在data和dom未初始化之前，因此初始化操作需要放在onMounted中
onMounted(async () => {
  //获取主题文件，
  const { theme } = await getDarkThemeApi();
  await echarts.registerTheme("dark", theme);

  //初始化图表完成
  initChart(theme.themeType);
  window.addEventListener("resize", () => {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
  });
});

onUnmounted(() => {
  //可以移除吗？
  window.removeEventListener("resize", () => {
    myChart1.resize();
    myChart2.resize();
    myChart3.resize();
  });
});
watch(
  () => theme.themeType,
  (newVal) => {
    myChart1 && myChart1.dispose();
    myChart2 && myChart2.dispose();
    myChart3 && myChart3.dispose();
    initChart(theme.themeType);
  }
);
// watchEffect(async () => {
//   // initChart(theme.themeType)
//   console.log("修改图表");
//   console.log(theme.themeType);
// });

const displayData = reactive({
  adminTotal: 0,
  articleTotal: 0,
  recent: 0,
  userTotal: 0,
});

getDisplayDataApi()
  .then((res) => {
    if (res.data) {
      displayData.adminTotal = res.data.adminTotal;
      displayData.articleTotal = res.data.articleTotal;
      displayData.recent = res.data.recent;
      displayData.userTotal = res.data.userTotal;
    }
  })
  .catch((err) => {
    ElMessage.error(err.message);
  });

//设置缓存
let myChart1OptionCache = null;
let myChart2OptionCache = null;
let myChart3OptionCache = null;
const initChart = async (type) => {
  myChart1 = echarts.init(char1Ref.value, type);
  myChart2 = echarts.init(char2Ref.value, type);
  myChart3 = echarts.init(char3Ref.value, type);
  //配置图表数据
  const myChart1Option = myChart1OptionCache
    ? myChart1OptionCache
    : await getChart1Option();
  const myChart2Option = myChart2OptionCache
    ? myChart2OptionCache
    : await getChart2Option();
  const myChart3Option = myChart3OptionCache
    ? myChart3OptionCache
    : await getChart3Option();
  myChart1OptionCache = myChart1Option;
  myChart2OptionCache = myChart2Option;
  myChart3OptionCache = myChart3Option;
  //设置图表
  myChart1.setOption(myChart1Option);
  myChart2.setOption(myChart2Option);
  myChart3.setOption(myChart3Option);
};

//async 返回的是promise 获取图表数据 格式化后返回一个配置
const getChart1Option = async () => {
  const { data } = await analysisAddApi();
  let dateX = [];
  let countData = [];
  data.sort((a, b) => a.date - b.date);
  for (const item of data) {
    dateX.push(new Date(item.date).toLocaleDateString().slice(5));
    countData.push(item.count);
  }
  return {
    title: {
      left: "center",
      text: "最近近新增用户"
    },
    tooltip: {},
    xAxis: {
      data: dateX,
    },
    yAxis: {},
    series: [
      {
        name: "新增",
        type: "line",
        data: countData,
      },
    ],
  };
};
const getChart2Option = async () => {
  return {
    title: {
      text: "网站点击量",
    },
    tooltip: {},
    legend: {
      data: ["销量"],
    },
    xAxis: {
      data: ["11-16", "11-17", "11-18", "11-19", "11-20", "11-21"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };
};
const getChart3Option = async () => {
  return {
    title: {
      text: "网站检索",
    },
    tooltip: {},
    legend: {
      data: ["销量"],
    },
    xAxis: {
      data: ["11-16", "11-17", "11-18", "11-19", "11-20", "11-21"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };
};
</script>

<style lang="scss" scoped>
.main-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box-top {
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  div {
    align-self: flex-start;
    margin: 10px 20px;
    height: 80px;
    border-radius: 6px;
    min-width: 150px;
    max-width: 250px;
    box-shadow: 1px 1px 10px gray;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    overflow: hidden;
    &:nth-child(1) {
      background-color: #cbe0f4;
      color: #443939;
    }
    &:nth-child(2) {
      background-color: #61ea8f;
      color: #443939;
    }
    &:nth-child(3) {
      background-color: #ea61c2;
      color: #443939;
    }
    &:nth-child(4) {
      background-color: #de4547;
      color: beige;
    }
  }
}
.box-chart {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  & > div:nth-child(1) {
    height: 100%;
    width: 40%;
  }
  & > div:nth-child(2) {
    flex: 1;
    display: flex;
    width: 340px;
    flex-direction: column;
    height: 100%;
    div {
      &:nth-child(2) {
      }

      flex: 1;
    }
  }
}
</style>
